

@mixin customize-sizes($sizes){
    $space : map_get($sizes,space);
    $font : map-get($sizes, font );
    $header-space :map_get($sizes,header-space);
    $message-space:map_get($sizes,message-space);
    $app_header_size : map-get($sizes,header-font) + $space * 2;
    $face-size :  map-get($sizes, nav ) - $space*2;//导航区的宽度-padding
    $search-input-size :  $font + $space*2;
    $chat-caption-size : $font *1.5;
    $header-size :max(max($face-size + $space*2,$search-input-size + $header-space*2),$chat-caption-size + $space*2);
    $face-height: $header-size - $space*2;
    
    

    *{
        font-size:map-get($sizes, font );
    }
    #waiting{
        text-align:center;
        position:absolute;
        &>div{
            margin:$header-space;
        }
        i{
            font-size:$font*4;
        }
    }
   
    input[type="text"],input[type="password"],select,textarea{
        border-width:1px;
        border-radius: $space;
        padding:$space;
        outline: none;
    }

    #app-header{
        display:none;
        margin-left:map-get($sizes,nav);//把导航的位置让出来
        height:$app_header_size;
        width:100%;
        right:0;top:0;
        opacity:0.01;
        transition: opacity 1s;
        &:hover{
            opacity:0.9;
        }
        &>menu{
            height:$app_header_size;
            &>li{
                padding:$space $space*1.5;
                display:inline-block;
                height:$app_header_size;
                font-size:map-get($sizes,header-font);
            }
        }
    }
    
    #nav{
        width:map-get($sizes, nav );
        //padding-top:$app_header_size;
        header{
            height: $header-size;
            vertical-align: middle;
            padding:($header-size - $face-height)/2 $space;
            img{
                width:$face-size ;
                height: $face-height;
                display: block;
            }  
        }
        #top-menu{
            padding:$header-space;
            &>li{
                i{font-size:(map-get($sizes,nav)-$space*2) * 0.5;}
                padding: $header-space 0;
            }
        }
    }
    
    #chats{
        width:map-get($sizes, chats );
        //padding-top:$app_header_size;//让出头的位置
        &>header{
            vertical-align: middle;
            height:$header_size;
            padding:($header-size - $search-input-size)/2 $header-space;
        }
        .search-input{
            display: inline-block;
            height:$font + $space*2;
            font-size:$font;
            &::before{
                top:$space;
                left:$space;
            }
            &>input{
                padding:$space;
                padding-left: $space*2 +$font;
            }
        }
        #chat-list{
            overflow:auto;
            &>li{
                display:flex;
                padding:$header-space;
                img{
                    margin-right:$header-space;
                    width:$face-size;
                    height:$face-size;
                }
                figure{
                    height:$face-size;
                    width:map-get($sizes, chats ) - $header-space*3 - $face-size;
                    display: flex;
                    flex-flow: column nowrap;
                    justify-content: space-around;
                    figcaption{
                        display: flex;
                        width:100%;
                        justify-content: space-between;
                        figcaption>span{
                            text-align: left;
                        }
                        
                    }
                    
                }
            }
        }
    }
    #current-chat{
        //padding-top:$app_header_size;//让出头的位置
        &>header{
            height:$header-size;
            vertical-align: middle;
            padding:($header-size - $chat-caption-size)/2 $header-space;
            padding-left:$message-space;
            border-bottom:1px solid;
            
            h3{
                font-size:$font *1.5;
            }
        }       
        #messages{
            overflow:auto;
            &>li{
                padding:$space $message-space;
                display:flex;
                align-items: flex-start;
                &>img{
                    width:$face-size;
                    height:$face-size;
                    box-shadow: 1px 1px 2px 2px #eee;
                }
                &>.content{
                    border:1px solid;
                    border-radius:$space;
                    padding:$space;
                    position: relative;
                    box-shadow: 1px 1px 2px 2px #eee;
                }
                &>.content::before{
                    content:" ";
                    font-size:0;
                    position: absolute;
                    display: block;
                    z-index:1;
                    border-style:solid;
                    border-left-width: 0;
                    border-right-width: 0;
                    border-top:$header-space/2 solid transparent;
                    border-bottom:$header-space/2 solid transparent;
                    box-shadow: 2px 1px 2px 3px #ddd inset;
                }
                &.other{
                    flex-flow: row nowrap;
                    &>.content{
                        margin-left:$header-space;
                        position: relative;
                    }
                    &>.content::before{
                        left:-$header-space*0.6;top:$header-space*0.8;  
                        z-index:1;
                        border-right-width:$header-space*0.6;
                    }
                }
                &.self{
                    flex-flow: row-reverse nowrap;
                    &>.content{
                        margin-right:$header-space;
                    }
                    &>.content::before{
                        right:-$header-space*0.6;top:$header-space*0.8;  
                        z-index:1;
                        border-left-width:$header-space*0.6;
                    }
                }
            }
        }
        #op{
            #editor-btns{
                height:$font + $space*2;
                padding:0 $message-space;
                &>li{
                    padding :$space;
                    display:inline-block;
                    &:first-child{
                        padding-left:0;
                    }
                }
            }
            #message-input{
                width:100%;
                padding : 0 $space;
                line-height:$font*1.2;
                border:0;
                height:$font*1.2*3;
            }
            footer{
                text-align: right;
                #send-btn{
                    margin:$space;
                    margin-right:$space*3;
                    padding:$space;
                    
                    border:1px solid red;
                    &::after{
                        font-family:FontAwesome;
                        content:"\f1d9";
                        padding:0 $space;
                    }
                }

            }
            
        }
    }
    #login-form{
        position:absolute;
        padding:$header-space*2;
        max-width:400px;
        min-width:150px;
        width:80%;
        border-width: 1px solid;
        border-radius: $header-space;
        text-align: center;
        &>img{
            width:100px;
            height:100px;
            margin:$header-space*2;
        }
        &>div{
            display:block;
            margin:$header-space;
            position: relative;
            &.username{
                box-shadow: 0px 1px 1px 1px #efefef;
                font-size:$font*1.2;
                &::before{
                    font-family:FontAwesome;
                    content:"\f007";
                    position: absolute;
                    top:$header-space;
                    left:$header-space;
                }
            }
            &.password{
                font-size:$font*1.2;
                border-bottom-width: 1px;
                border-bottom-style: solid;
                &::before{
                    font-family:FontAwesome;
                    content:"\f084";
                    position: absolute;
                    top:$header-space;
                    left:$header-space;
                }
            }
            
            & input[type="text"],& input[type="password"]{
                padding:$space;
                padding-left:$font + $header-space*2;
                width:100%;
                font-size:$font*1.2;
            }
            &.more{
                text-align: right;
                margin-top:$header-space*2;
            }
            #login-btn{
                border-width:1px;
                border-style: solid;
                border-radius: $space;
                padding:$header-space $header-space*2;
                min-width:100px;
                max-width:200px;
                width:50%;
                outline: none;
                cursor:hand;
                font-size:$font*1.2;
                &::after{
                    font-family:FontAwesome;
                    content:"\f09c";
                    padding:0 $header-space;
                }
            }
            
        }
        
       
    }
}//end customize-colors

@mixin customize-colors($colors){
    body{
        color:map-get($colors,font);
        background-color:map-get($colors,backend);
    }
    #app{
        overflow: hidden;
    }
    h3{
        color:map-get($colors, title );
    }
    input[type="text"],input[type="password"],select,textarea{
        background-color: map-get($colors,input-backend);
        border-color:map-get($colors,input-backend);
    }
    #app-header li{
        color:map-get($colors,app-font);
        &:hover{
            color: map-get($colors,  app-btn-font-hover);
            background-color:map-get($colors,app-btn-backend-hover);
        }
    }
    #nav{
        background-color: map-get($colors,primary);
        #top-menu{
            li{
                color:lighten(map-get($colors,primary),50%);
                &:hover{
                    color:map-get($colors,nav-font-hover);
                }
                &.selected{
                    color:lighten(map-get($colors,primary),80%);
                }
            }
        }
    }
    #chats{
        background-color: map-get($colors, chats-backend );
        #chat-list{
            li:hover{
                background-color:lighten(map-get($colors,chats-backend),5%);
            }
            li.selected{
                background-color:darken(map-get($colors,chats-backend),5%);
            }
            .name{color:map-get($colors,title);}
        } 
    }
    #current-chat{
        background-color: map-get($colors, chat-backend );
        &>header{
            border-color:darken(map-get($colors , chat-backend), 10%)
        }
        &>#messages{
            &>li{ 
                &>.content{
                    
                    border-color: map-get($colors,chat-content-backend);
                    background-color: map-get($colors,chat-content-backend);
                    
                }
                &.other{
                    
                    &>.content::before{
                        
                        color: map-get($colors,chat-content-backend);
                        border-right-color:map-get($colors,chat-content-backend);
                    }
                }
                &.self{
                    &>.content::before{
                        color: map-get($colors,chat-content-backend);
                        border-left-color:map-get($colors,chat-content-backend);
                    }
                }
            }
            
        }
        #op{
            background-color:map-get($colors,chat-content-backend);
            color:map-get($colors,font);
            #editor-btns{
                &>li:hover{
                    color:darken(map-get($colors , font), 80%);
                    cursor:hand;
                }
            }
            #message-input{
                background-color:map-get($colors,chat-content-backend);
            }
            footer{
                
                #send-btn{
                    border-color:darken(map-get($colors,chats-backend),15%);
                    color:darken(map-get($colors,font),15%);
                    &:hover{
                        border-color:darken(map-get($colors,chats-backend),30%);
                        color:darken(map-get($colors,font),60%);
                    }
                }
            }
            
        }
    }

    #login-form{
        background-color:map-get($colors,chat-content-backend);
        box-shadow: 1px 1px 4px 4px darken(map-get($colors,chat-content-backend),10%);
        border-color:map-get($colors,chat-content-backend);

        &>.username,&>.password{
            color:lighten(map-get($colors,font),15%);
            &::before{
                
                color:lighten(map-get($colors,font),15%);
            }
            &:hover{
                color:map-get($colors,font);
                &>input{
                    color:map-get($colors,font);
                }                
            }
        }
        input[type='text'],input[type="password"]{
            background-color: map-get($colors,chat-content-backend);
            user-select: text;
        }
        #login-btn{
            border-color: darken(map-get($colors,chat-content-backend),10%);
        }
    }
}//end customize-colors

@font-face {
    font-family: 'FontAwesome';
    src: url('fonts/fontawesome-webfont.eot?v=4.7.0');
    src: url('fonts/fontawesome-webfont.eot?#iefix&v=4.7.0') format('embedded-opentype'), url('fonts/fontawesome-webfont.woff2?v=4.7.0') format('woff2'), url('fonts/fontawesome-webfont.woff?v=4.7.0') format('woff'), url('fonts/fontawesome-webfont.ttf?v=4.7.0') format('truetype'), url('fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular') format('svg');
    font-weight: normal;
    font-style: normal;
  }


*{
    box-sizing: border-box;
    padding:0;
    margin:0;
    border:0;
}
html,body,#app{
    padding:0;margin:0;border:0;
    user-select: none;

}
ul,ol,dl,menu{
    list-style: none;
}
#app-header{
    -webkit-app-region:drag;
    position:fixed;
    &>menu{
        display:flex;
        justify-content: flex-end;     
    }
}
#workarea{
    display: table;
    vertical-align: top;
    width:100%;
}
#nav{
    -webkit-app-region:drag;
    display: table-cell;
    user-select: none;
    vertical-align: top;
    text-align: center;
}
#chats{
    display: table-cell;
    vertical-align: top;
    &>header{
        -webkit-app-region:drag;
        user-select: none;
    }
    .search-input{
        position: relative;
        z-index:0;
        user-select: text;
        &::before{
            content: "\f002";
            position: absolute;
            left:0;top:0;
            z-index: 1;
            font-family:  FontAwesome;
            text-rendering: auto;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }
    }
}
#current-chat{
    display: table-cell;
    vertical-align: top;
    &>header{
        -webkit-app-region:drag;
        user-select: text;
    }
    #message-input{
        user-select:all;
    }
    #messages .conent{
        user-select:all;
    }
}


$normalSizes:(
    font:14px
    ,space:8px
    ,header-space:12px
    ,message-space:16px
    ,margin:6px
    ,padding:8px
    ,border-radius:6px
    ,input-padding:3px
    ,header-font:12px
    ,nav:60px
    ,chats:240px
);

@include customize-sizes($normalSizes);



$defaultColors :(
    primary:#0a3f89
    ,strong:#e60406
    ,font:#808080 //整个网站的字体颜色
    ,backend:#f5f5f5
    ,title:#000
    ,input-backend:#dbd9d8
    ,app-btn-font:#808080 //应用的按键字体色
    ,app-btn-font-hover:#6a6a6a
    ,app-btn-backend-hover:#e5e5e5
    ,nav-backend:#282828 //导航区的背景色
    ,nav-font:#9f9f9f// 导航区的字体颜色
    ,nav-font-hover:lighten(#9f9f9f,20%)
    ,chats-backend:#ebebeb //聊天列表的背景色
    ,chat-backend:#f5f5f5 //当前会话的背景色
    ,chat-content-backend:#fff
);

@include customize-colors($defaultColors);